<template>
    <div>
        <mt-header title="美美护肤 - 数据采集">
            <router-link to="/index.html" slot="left">
                <mt-button icon="back" @click="back()">返回</mt-button>
            </router-link>
            <mt-button slot="right" @click.native="login">登陆</mt-button>
        </mt-header>
        <div>
            <mt-navbar v-model="mvvm.selected">
                <mt-tab-item v-for="(item,index) in mvvm.exportItem" :id="index" :key="index">{{item.title}}</mt-tab-item>
            </mt-navbar>

            <!-- tab-container -->
            <mt-tab-container v-model="mvvm.selected">
                <mt-tab-container-item v-for="(item,index) in mvvm.exportItem" :id="index" :key="index">
                    <mt-cell v-for="(item2,index) in item.list"
                             :title="item2.title"
                             is-link
                             :key="index"
                             @click.native="openExportDataDialog(item2)"
                    >
                    </mt-cell>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        <mt-popup
                style="width: 100%;"
                v-model="mvvm.popupVisible"
                position="bottom">
            <div style="width: 100%;">
                <mt-field placeholder="请输入数据接口" type="textarea" rows="5" v-model="mvvm.popupItem.link"></mt-field>
                <mt-button type="primary" style="width: 100%;margin: 15px 0"
                           @click.native="exportData(mvvm.popupItem.link)">开始采集
                </mt-button>
            </div>
        </mt-popup>
        <mt-popup
                style="width: 100%;height: 100%"
                v-model="mvvm.dataVisible"
                position="right">
            <div style="width: 100%;height: 100%">
                <mt-header title="美美护肤 - 数据采集">
                    <router-link to="/" slot="left">
                        <mt-button icon="back" @click.native="mvvm.dataVisible=false">返回</mt-button>
                    </router-link>
                    <mt-button slot="right" @click.native="login">登陆</mt-button>
                </mt-header>
                <mt-field placeholder="json数据" type="textarea" rows="18" v-model="mvvm.jsonData"></mt-field>
                <mt-button type="primary" style="position: absolute;bottom: 0; width: 100%;margin: 10px 0"
                           @click.native="submit">提交
                </mt-button>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    export default {
        name: "dataAnalysis",
        data() {
            return {

                mvvm: {
                    exportDataDialog: false,
                    // tab选择
                    selected: 0,
                    // 数据采集list
                    exportItem: [
                        {
                            title: "店铺数据",
                            list: [
                                {
                                    title: "日常数据",
                                    link: "https://sycm.taobao.com/adm/v2/execute/previewById.json?id=431604&reportType=1&_=1542196287396&token=c8b959f78",

                                }
                            ]
                        },
                        {
                            title: "备选",
                            list: []
                        }
                    ],

                    popupVisible: false,
                    dataVisible: false,
                    popupItem: {
                        link: ""
                    },
                    jsonData: ""
                }
            }
        },
        methods: {
            openExportDataDialog: function (item) {
                this.mvvm.popupItem.link = item.link;
                this.mvvm.popupVisible = true;
            },
            login: function () {
                // 生意参谋登陆
                window.open("https://sycm.taobao.com/custom/login.htm?_target=http://sycm.taobao.com/portal/home.html")
            },
            // 开始采集数据
            exportData: function (link) {
                this.mvvm.dataVisible = true
                window.open(link);


            },
            submit: function () {
            },
            back(){
                this.$router.go(-1)
            }
        }

    }
</script>

<style scoped>

</style>
